<template>
	<div class="Icons">
		<p>
			<span  class="swiper-slide"  v-for="item in list" :key="item.id">
				<router-link to="/"><img :src="item.imgURL"><p>{{item.word}}</p></router-link>
			</span>
		</p>
	</div>
</template>

<script>
	export default{
		name:'Icons',
		props:['propsicons'],
		data(){
			return{
				list:[
			
				],	
			}
		},
		watch:{
			propsicons(){
				this.list = this.propsicons
			}
		}
	}
</script>

<style scoped>
	.Icons{
		width: 100%;
		margin: auto;
		overflow: hidden;
		padding: 0.3rem 0 0;
		border-bottom: 0.03rem solid gainsboro;
	}
	a{
		text-decoration: none;
		color: black;
	}
	p{
		width: 100%;
		padding-top: 0.15rem;
		padding-bottom: 0.5rem;
		text-align: center;
	}
	span{
		margin-top: 0.1rem;
		display: inline-block;
		width: 25%;
		height: 2.0rem;
		margin-bottom: 0.2rem;
		
	}
	span img{
		width: 1.2rem;
		height: 1.2rem;
	}

</style>
